<template>
    <div class="col-md-3 column" id="right-nav">
        <div class="panel panel-default">
            <div class="panel-heading">日期归档</div>
            <div class="panel-body">
                <span v-if="dateLoading">
                    <span class="glyphicon glyphicon-refresh"></span>loading...
                </span>
                <ul v-if="!dateLoading">
                    <li v-for="date in dates"><a v-bind:href="'/#/archives/'+date">{{date}}</a></li>
                </ul>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">标签云</div>
            <div class="panel-body">
                <div id="cloud">
                    <span v-if="cloudLoading">
                    <span class="glyphicon glyphicon-refresh"></span>loading...
                </span>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">友情链接</div>
            <div class="panel-body">
                <p><a href="http://www.tianyk.cn">Knoerf的博客</a></p>
                <p><a href="http://mazhewei.cn/">马棚 - 博客空间</a></p>
                <p><a href="http://www.bgpan.cn/">Amazing Corner</a></p>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                dates: null,
                dateLoading: false,
                cloudLoading: false
            }
        },
        created(){
            this.fatchData();
        },
        methods: {
            fatchData(){
                //date
                var vm = this;
                vm.dateLoading = vm.cloudLoading = true;
                $.get("/api/getDates", function (json) {
                    var res = $.parseJSON(json);
                    vm.dateLoading = false;
                    vm.dates = res;
                });

                //Cloud
                $.get("/api/getWords", function (json) {
                    vm.cloudLoading = false;
                    var res = $.parseJSON(json);
                    var i;
                    var obj;
                    var array = new Array();
                    for (i = 0; i < res.length; i++) {
                        obj = new Object();
                        obj.text = res[i].text;
                        obj.weight = res[i].weight;
                        obj.link = "/search?search=" + res[i].text + "&isLabel=1";
                        array.push(obj);
                    }
                    var cloud = $("#cloud");
                    cloud.html("");
                    cloud.jQCloud(array, {
                        removeOverflowing: true,
                        shape: "elliptic",
                        height: 200
                    });
                });
            }
        }
    }
</script>

<style scoped>
    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        margin: 0;
    }
</style>